<template>
    <div class="cart_module" >
        <section v-if="food.specifications && food.specifications.length" class="choose_specification">
            <transition name="showReduce">
                <span v-if="foodNum" @click="showReduceTip">
                    <svg class="minus_icon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                    </svg>
                </span>
            </transition>
            <transition name="fade">
                <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
            </transition>
            <span class="show_chooselist" @click="showChooseList">选规格</span>
        </section>
        <section v-else class="cart_button">
            <transition name="showReduce">
                <span v-if="foodNum" @click="removeOutCart(food)">
                    <svg class="minus_icon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                    </svg>
                </span>
            </transition>
            <transition name="fade">
                <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
            </transition>
            <svg class="add_icon" @click="addToCart(food, $event)">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
            </svg>
        </section>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    props:['food','shopId'],
    
    data(){
        return {
            
        }
    },
    computed:{
        ...mapState(['cartList']),
        shopCart(){
            return Object.assign({},this.cartList[this.shopId]||{});
        },
        foodNum(){
            let categoryId = this.food.category_id;
            let itemId = this.food.item_id;
            let foodId = this.food.food_id||this.food.specfoods[0].food_id;
            if(this.shopCart && this.shopCart[categoryId] && this.shopCart[categoryId][itemId]){
                let num=0;
                Object.values(this.shopCart[categoryId][itemId]).forEach(item=>{
                    if(item){
                        num+=item.num
                    }
                })
                return num;
            }else {
                return 0;
            }
        }
    },
    methods:{
        //加入购物车，并且计算按钮位置。
        addToCart(food, event){
            let params={
                shopid:this.shopId,
                category_id:food.category_id,
                item_id:food.item_id,
                food_id:food.food_id||food.specfoods[0].food_id,
                name:food.name||food.specfoods[0].name,
                price:food.price||food.specfoods[0].price,
                specs:'',
                packing_fee: food.specfoods ? food.specfoods[0].packing_fee:food.packing_fee ,
                sku_id:food.sku_id||food.specfoods[0].sku_id,
                stock:food.stock||food.specfoods[0].stock,
            }
            const elLeft = event.target.getBoundingClientRect().left;
            const elBottom = event.target.getBoundingClientRect().bottom;
            this.$emit('addToCart',params,{left:elLeft,bottom:elBottom})
        },
        removeOutCart(food){
            if(this.foodNum==0){
                return;
            }
            let params={
                shopid:this.shopId,
                category_id:food.category_id,
                item_id:food.item_id,
                food_id:food.food_id||food.specfoods[0].food_id,
                name:food.name||food.specfoods[0].name,
                price:food.price||food.specfoods[0].price,
                specs:'',
                packing_fee:food.specfoods ? food.specfoods[0].packing_fee:food.packing_fee ,
                sku_id:food.sku_id||food.specfoods[0].sku_id,
                stock:food.stock||food.specfoods[0].stock,
            }
            this.$emit('reduceCart',params)
            // 
        },
        //显示规格列表
        showChooseList(){
            this.$emit('showChooseList', this.food);
        },
        showReduceTip(){
            this.$emit('showReduceTip')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.cart_module{
    .cart_button,.choose_specification{
        font-size: 0;
        display: flex;
        align-items: center;
    }
    .add_icon,.minus_icon{
        @include wh(0.8rem,0.8rem);
        fill: $blue;
    }        
    .cart_num{
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        @include sc(0.65rem,#666);
        font-weight: 700;
    }
    .show_chooselist{
        @include sc(0.55rem,#fff);
        background: $blue;
        padding: 0.1rem 0.3rem;
        border-radius: 0.2rem;
    }
}
.showReduce-enter,.showReduce-leave-to{
    transform: translateX(1rem);
    opacity: 0;
}
.showReduce-enter-active,.showReduce-leave-active{
    transition: all 0.3s ease-out;
}
.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
    transition: all 0.3s ;
}
</style>